import React from 'react'
import {StyleSheet, View, Text, ScrollView, TouchableOpacity, Image} from 'react-native'
import BaseComponent from "../../common/BaseComponent";
import Header from "../../common/head/Header";
import {Appearance} from "react-native-appearance";
import Color from "../../utils/Color";
import ScreenUtils from "../../utils/ScreenUtils";
import {i18n} from "../../language/i18n";
import Swiper from 'react-native-swiper'

import CardView from 'react-native-cardview-wayne';

const cardBgStyle = ScreenUtils.isDarkTheme() ? Color.darkBg: '#fff'
const backgroundColor = Appearance.getColorScheme() === 'dark' ? Color.darkBg : Color.lightBg
export default class steps extends BaseComponent {
    constructor(props) {
        super(props);
        this.state = {
            selectedIndex: 0
        }
    }

    _renderHeader() {
       return (
           <Header label={i18n.t('steps')} goBack={() => this._goBack()}/>
       )
    }

    _goBack() {
        // Navigation.pop(this.props.componentId)
    }

    _selectSegeTab(id) {
        this.setState({
            selectedIndex: id
        })
    }





    // 分段器, 待youhua
    _renderSegmented() {
        let {selectedIndex} = this.state;
        let selectTextColor = ScreenUtils.isDarkTheme() ? '#F54556' : '#6491FF'
        return (
            <View style={styles.segmented}>
                <View style={styles.segeLine}>
                    {  // 天
                        selectedIndex === 0 ? (
                        <CardView
                            onPress={() => this._selectSegeTab(0)}
                            style={styles.selectBox}
                            cardElevation={4}
                            maxCardElevation={4}
                            radius={7}
                            backgroundColor={cardBgStyle}>
                            <View style={styles.selectBox}>
                                <Text style={{color: selectTextColor}}>{i18n.t('day')}</Text>
                            </View>
                        </CardView>
                    ): (
                        <TouchableOpacity activeOpacity={1} onPress={() => this._selectSegeTab(0)} style={{flex: 1}}>
                            <View style={[styles.textBox, {borderRightWidth: selectedIndex === 1 ? 0 : 1}]}>
                                <Text>{i18n.t('day')}</Text>
                            </View>
                        </TouchableOpacity>
                    )}
                        {   // 周
                            selectedIndex === 1 ? (
                            <CardView
                                onPress={() => this._selectSegeTab(1)}
                                style={styles.selectBox}
                                cardElevation={4}
                                maxCardElevation={4}
                                radius={7}
                                backgroundColor={cardBgStyle}>
                                <View style={styles.selectBox}>
                                    <Text style={{color: selectTextColor}}>{i18n.t('week')}</Text>
                                </View>
                            </CardView>
                        ): (
                            <TouchableOpacity activeOpacity={1} onPress={() => this._selectSegeTab(1)} style={{flex: 1}}>
                                <View style={[styles.textBox, {borderRightWidth: selectedIndex === 2 ? 0 : 1}]}>
                                    <Text>{i18n.t('week')}</Text>
                                </View>
                            </TouchableOpacity>
                        )}


                    {   // 月
                        selectedIndex === 2 ? (
                            <CardView
                                style={styles.selectBox}
                                cardElevation={4}
                                maxCardElevation={4}
                                radius={7}
                                backgroundColor={cardBgStyle}>
                                <View style={styles.selectBox}>
                                    <Text style={{color: selectTextColor}}>{i18n.t('month')}</Text>
                                </View>
                            </CardView>
                        ): (
                            <TouchableOpacity activeOpacity={1} style={{flex: 1}} onPress={() => this._selectSegeTab(2)}>
                                <View style={[styles.textBox, {borderRightWidth: selectedIndex === 3 ? 0 : 1}]}>
                                    <Text>{i18n.t('month')}</Text>
                                </View>
                            </TouchableOpacity>
                        )}
                    {   // 月
                        selectedIndex === 3 ? (
                            <CardView
                                onPress={() => this._selectSegeTab(3)}
                                style={styles.selectBox}
                                cardElevation={4}
                                maxCardElevation={4}
                                radius={7}
                                backgroundColor={cardBgStyle}>
                                <TouchableOpacity activeOpacity={1} style={styles.selectBox}>
                                    <Text style={{color: selectTextColor}}>{i18n.t('year')}</Text>
                                </TouchableOpacity>
                            </CardView>
                        ): (
                            <TouchableOpacity activeOpacity={1} style={{flex: 1}} onPress={() => this._selectSegeTab(3)}>
                                <View style={[styles.textBox, {borderRightWidth: 0}]}>
                                    <Text>{i18n.t('year')}</Text>
                                </View>
                            </TouchableOpacity>
                        )}
                </View>
            </View>
        );
    }


    _switchPage() {
        return (
            <Swiper
                style={styles.wrapper}
                showsButtons={false}
                showsPagination={false}
                autoplay={false}
                index={this.state.selectedIndex}
                scrollEnabled={false}>
                <View style={styles.slide1}>
                    <Text style={styles.text}>Hello Swiper</Text>
                </View>
                <View style={styles.slide2}>
                    <Text style={styles.text}>Beautiful</Text>
                </View>
                <View style={styles.slide3}>
                    <Text style={styles.text}>And simple</Text>
                </View>
                <View style={styles.slide1}>
                    <Text style={styles.text}>444444</Text>
                </View>
            </Swiper>
        )
    }

    _renderComponents() {
        return(
            <ScrollView style={[styles.container, {backgroundColor: backgroundColor}]}>
                {this._renderSegmented()}
                {this._switchPage()}
            </ScrollView>
        )
    }

}

const segeLine = ScreenUtils.screenWidth * 0.7
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    segmented: {
        width: ScreenUtils.screenWidth,
        height: 70,
        backgroundColor: backgroundColor,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    segeLine: {
        height: 30,
        width: segeLine,
        backgroundColor: ScreenUtils.isDarkTheme() ? '#43434A' : '#E4E4E8',
        borderRadius: 7,
        flexDirection: 'row',
        alignItems: 'center'
    },
    textBox: {
        height: 20,
        width: segeLine / 4,
        justifyContent: 'center',
        alignItems: 'center',
        borderRightWidth: 1,
        borderRightColor: '#999999',
        textAlign: 'center'
    },
    selectBox: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    wrapper: {},
    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB'
    },
    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5'
    },
    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9'
    },
    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold'
    }
})
